<template>
  <div>
    <img class="statusBall "
         :style="{left: left+'px',top: top+'px'}"
      :src="imageSrc"
    />
  </div>

  <!--:src="imageSrc"-->
</template>

<script>
//import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
import stateR from '@/assets/img/state2.png'
import stateG from '@/assets/img/state1.png'
import stateY from '@/assets/img/state.png'

export default {
  props:{
    left:{
      type:String,
      default:'1'
    },
    top:{
      type:String,
      default:'0'
    },
    status:{
      type:String,
      default:'g'
    },
    flash:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      imageSrc:''
    }
  },
  watch:{
    status:{
      handler (newData) {
        newData=newData.toUpperCase()
        switch (newData) {
          case 'R':
            this.imageSrc=stateR
            break;
            case 'G':
              this.imageSrc=stateG
                break;
          default:
            this.imageSrc=stateY
        }
      },
      // 立即监听
      immediate: true,
      // 深度监听
      deep: true
     // ../../assets/img/state1.png"
    }
  },
  components: {
    //BottomLeftChart
  }
}
</script>

<style lang="scss" scoped>
  .statusBall{
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left;
    width: 20px;
    position: absolute;
    z-index: 100;
    //padding-left: 30px;
  }
  .statusYellow{
    background-image: url("../../assets/img/state.png");
  }
  .statusGreen{
    background-image: url("../../assets/img/state1.png");
  }
  .statusRed{
    background-image: url("../../assets/img/state2.png");
  }
  .statusGray{
    background-image: url("../../assets/img/state3.png");
  }
</style>
